<template>
    <div class="app-container">
        <div class="app-container-main">
            <div class="main-card-header">
                会员列表
            </div>
            <div class="main-card-body">
                <div class="list-search">
                    <div class="list-options">
                        <a-select v-model:value="searchlist.status" style="width:100%" @change="handleSearchChange()">
                            <a-select-option value='不限会员状态'>不限会员状态</a-select-option>
                            <a-select-option value='已锁定'>已锁定</a-select-option>
                        </a-select>
                    </div>
                    <div class="list-options">
                        <a-select v-model:value="searchlist.reg_time" style="width:100%" @change="handleSearchChange">
                            <a-select-option value='按注册时间排序'>按注册时间排序</a-select-option>
                            <a-select-option value='按登录时间排序'>按登录时间排序</a-select-option>
                        </a-select>
                    </div>
                    <div class="list-options">
                        <a-select v-model:value="searchlist.reg_time_day" style="width:100%"
                            @change="handleSearchChange">
                            <a-select-option value='不限注册时间'>不限注册时间</a-select-option>
                            <a-select-option value='3天内'>3天内</a-select-option>
                            <a-select-option value='7天内'>7天内</a-select-option>
                            <a-select-option value='15天内'>15天内</a-select-option>
                            <a-select-option value='30天内'>30天内</a-select-option>
                        </a-select>
                    </div>
                    <div class="list-options">
                        <a-select v-model:value="searchlist.reg_time_source" style="width:100%"
                            @change="handleSearchChange">
                            <a-select-option value='不限注册来源'>不限注册来源</a-select-option>
                            <a-select-option value='APP'>APP</a-select-option>
                            <a-select-option value='手机浏览器'>手机浏览器</a-select-option>
                            <a-select-option value='微信浏览器'>微信浏览器</a-select-option>
                            <a-select-option value='微信小程序'>微信小程序</a-select-option>
                            <a-select-option value='抖音小程序'>抖音小程序</a-select-option>
                            <a-select-option value='电脑浏览器'>电脑浏览器</a-select-option>
                        </a-select>
                    </div>
                    <div class="list-options">
                        <a-select v-model:value="searchlist.iswechat" style="width:100%" @change="handleSearchChange">
                            <a-select-option value='不限微信绑定'>不限微信绑定</a-select-option>
                            <a-select-option value='已绑定微信'>已绑定微信</a-select-option>
                            <a-select-option value='未绑定微信'>未绑定微信</a-select-option>
                        </a-select>
                    </div>
                    <div class="list-options">
                        <a-select v-model:value="searchlist.email" style="width:100%" @change="handleSearchChange">
                            <a-select-option value='不限邮箱绑定'>不限邮箱绑定</a-select-option>
                            <a-select-option value='已绑定邮箱'>已绑定邮箱</a-select-option>
                            <a-select-option value='未绑定邮箱'>未绑定邮箱</a-select-option>
                        </a-select>
                    </div>
                    <div class="select-inp">
                        <div>
                            <a-select v-model:value="searchlist.input_inner" @change="handleSearchChange"
                                style="width:100px">
                                <a-select-option value='UID'>UID</a-select-option>
                                <a-select-option value='用户名'>用户名</a-select-option>
                                <a-select-option value='手机号'>手机号</a-select-option>
                                <a-select-option value='姓名'>姓名</a-select-option>
                            </a-select>
                        </div>
                        <a-input-search v-model:value="searchlist.search_value" placeholder="请输入搜索内容"
                            style="width: 200px;height: 32px;border-left: 0px;" @search="onSearch" />
                    </div>
                </div>
                <div class="table">
                    <a-table :columns="columns" :data-source="companylist" :row-selection="rowSelection"
                        :scroll="{ x: 1300, y: 1000 }" :rowKey="companylist => companylist.id" :pagination="false">
                        <template #status="{ record }">
                            <a-tag color="green" v-if="(record.status === 1)">正常</a-tag>
                            <a-tag color="red" v-else>已锁定</a-tag>
                        </template>
                        <template #last_login_time="{ record }">
                            <span v-if="(record.last_login_time === 0)"><history-outlined />从未登录</span>
                            <span v-else>{{ record.last_login_time }}</span>
                        </template>
                        <template #action="{ record }">
                            <a-button type="primary" size="small" @click="lookMen(record)">查看</a-button>
                            <a-button type="primary" size="small" @click="showEditModal(record)">修改</a-button>
                            <!-- <a-button type="primary" size="small">删除</a-button> -->
                            <a-dropdown :placement="bottom">
                                <a-button size="small"> ･ ･ ･</a-button>
                                <template #overlay>
                                    <a-menu>
                                        <a-menu-item>
                                            <a v-if="(record.status === 1)" @click="showConfirm(record)">
                                                锁定
                                            </a>
                                            <a v-else @click="showConfirm(record)">解锁</a>
                                        </a-menu-item>
                                        <a-menu-item>
                                            <a @click="deletemem(record)">
                                                删除
                                            </a>
                                        </a-menu-item>
                                    </a-menu>
                                </template>
                            </a-dropdown>
                        </template>
                    </a-table>
                </div>
                <div class="row">
                    <div class="row-button">
                        <a-button type="primary" @click="showAddModal">添加会员</a-button>
                        <a-button type="primary" danger @click="batchDeletemem">删除所选</a-button>
                    </div>
                    <div class="row-pagination">
                        <a-pagination v-model:current="page" :page-size-options="pageSizeOptions" :total="count"
                            :show-total="total => `Total ${total} items`" show-size-changer show-quick-jumper
                            :page-size="pagesize" @showSizeChange="onShowSizeChange" @change="onCurrentChange">
                            <template #buildOptionText="props">
                                <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
                                <span v-else>全部</span>
                            </template>
                        </a-pagination>
                    </div>
                </div>
            </div>
        </div>
        <!-- 新增的模态框 -->
        <a-modal v-model:visible="addvisible" title="添加【个人】会员" @ok="handleAddOk" @cancel="cancelAddForm"
            centered="true">
            <a-form ref="formRef" :rules="rules" :model="addformState" :label-col="labelCol">
                <a-form-item label="用户名" name="username">
                    <a-input v-model:value="addformState.username" />
                </a-form-item>
                <a-form-item label="手机号" name="mobile">
                    <a-input v-model:value="addformState.mobile" />
                </a-form-item>
                <a-form-item label="密码" name="password">
                    <a-input-password />
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 修改的模态框 -->
        <a-modal v-model:visible="editvisible" title="编辑会员" @ok="handleEditOk" @cancel="cancelAddForm" centered="true">
            <a-form ref="formRef" :rules="rules" :model="editformState" :label-col="labelCol">
                <a-form-item label="用户名" name="username">
                    <a-input v-model:value="editformState.username" />
                </a-form-item>
                <a-form-item label="手机号" name="mobile">
                    <a-input v-model:value="editformState.mobile" />
                </a-form-item>
                <a-form-item label="密码" name="password">
                    <a-input-password placeholder="如不修改请留空" />
                </a-form-item>
            </a-form>
        </a-modal>

        <!-- 查看会员 -->
        <a-modal v-model:visible="lookvisible" title="查看会员" :footer="null" centered="true">
            <div class="lookmem">
                <div>
                    <label>UID</label>
                    <span>{{ lookform.id }}</span>
                </div>
                <div>
                    <label>身份</label>
                    <span>{{ lookform.identity }}</span>
                </div>
                <div>
                    <label>用户名</label>
                    <span>{{ lookform.username }}</span>
                </div>
                <div>
                    <label>手机号</label>
                    <span>{{ lookform.mobile }}</span>
                </div>
                <div>
                    <label>注册时间</label>
                    <span>{{ lookform.reg_time }}</span>
                </div>
                <div>
                    <label>最近登录</label>
                    <span>{{ lookform.last_login_time }}</span>
                </div>
                <div>
                    <a-button @click="closeLook">关闭</a-button>
                </div>
            </div>
        </a-modal>
    </div>
</template>

<script>
import { defineComponent, onMounted, ref, reactive, createVNode } from "vue"
import { HomeOutlined, HistoryOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { message, Modal } from 'ant-design-vue';
import { useRoute } from "vue-router"
import { getmem, addmem, updatemem, delmem } from '@/api/member'


export default defineComponent({
    components: {
        HomeOutlined,
        HistoryOutlined
    },
    computed: {

    },
    emits: [],
    props: {
    },
    setup() {
        const companylist = ref([])
        const nowtime = ref('')
        const count = ref(0)//数据总数
        const pageSizeOptions = ref(['1', '3', '5', '7', '9']);
        const page = ref(1);//页数
        const pagesize = ref(3);//条目数
        const lookvisible = ref(false);
        const addvisible = ref(false);
        const editvisible = ref(false);
        const batchIdlist = ref([])

        const searchlist = reactive({
            status: '不限会员状态',
            reg_time: '按注册时间排序',
            reg_time_day: '不限注册时间',
            reg_time_source: '不限注册来源',
            iswechat: '不限微信绑定',
            email: '不限邮箱绑定',
            input_inner: 'UID',
            search_value: ""
        });

        const formRef = ref();


        //表单验证
        const rules = {
            username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
            mobile: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
        };

        //当前时间
        const getNowTime = () => {
            let dt = new Date()
            var y = dt.getFullYear()
            var mt = (dt.getMonth() + 1).toString().padStart(2, '0')
            var day = dt.getDate().toString().padStart(2, '0')
            var h = dt.getHours().toString().padStart(2, '0')
            var m = dt.getMinutes().toString().padStart(2, '0')
            nowtime.value = y + "-" + mt + "-" + day + " " + h + ":" + m
        }

        const addformState = reactive({
            username: '',
            mobile: '',
            reg_time: '',
            utype: 1,
            platform_id: 1
        });

        const editformState = reactive({
            id: '',
            username: '',
            mobile: ''
        });
        //添加表单事件
        const handleAddOk = () => {
            getNowTime()
            addformState.reg_time = nowtime.value
            addmem(addformState).then((res) => {
                if (res.status === 201) {
                    message.success('添加成功');
                    addvisible.value = false;
                    getCompanylist()
                } else {
                    message.success('添加失败');
                }
            })
        }

        //修改会员
        const handleEditOk = () => {
            updatemem(editformState.id, editformState).then((res) => {
                if (res.status = 200) {
                    message.success('修改成功');
                    getCompanylist()
                    editvisible.value = false
                } else {
                    message.success('修改失败');
                }
            })
        }


        const lookform = reactive({
            id: '',
            identity: '个人会员',
            username: '',
            mobile: '',
            reg_time: '',
            last_login_time: '从未登录'
        })

        //查看
        const lookMen = (record) => {
            lookvisible.value = true
            console.log(record);
            lookform.id = record.id
            lookform.username = record.username
            lookform.mobile = record.mobile
            lookform.reg_time = record.reg_time
        }

        //关闭查看
        const closeLook = () => {
            lookvisible.value = false
        }

        //添加表单的取消
        const cancelAddForm = () => {
            formRef.value.resetFields();
        }

        //展示添加会员的模态框
        const showAddModal = () => {
            addvisible.value = true;
        }

        //展示编辑会员的模态框
        const showEditModal = (record) => {
            editvisible.value = true;
            editformState.id = record.id
            editformState.username = record.username
            editformState.mobile = record.mobile
        }

        //锁定会员
        const showConfirm = (record) => {
            let text = ''
            if (record.status === 1) {
                text = '锁定'
            } else {
                text = '解锁'
            }
            Modal.confirm({
                title: '提示',
                icon: createVNode(ExclamationCircleOutlined),
                content: createVNode('div', { style: 'color:red;' }, `确定${text}该会员吗`),
                centered: true,
                onOk() {
                    let status = 0
                    if (record.status === 0) {
                        status = 1
                    } else {
                        status = 0
                    }
                    updatemem(record.id, { status: status }).then((res) => {
                        if (res.status = 200) {
                            getCompanylist()
                        }
                    })
                },
                onCancel() {
                    console.log('Cancel');
                },
                class: 'test',
            });
        };

        //删除会员
        const deletemem = (record) => {
            Modal.confirm({
                title: '提示',
                icon: createVNode(ExclamationCircleOutlined),
                content: createVNode('div', { style: 'color:black;' }, '删除个人会员将删除此会员的一切信息，包括简历、投递记录等信息，删除后不可恢复。是否继续？'),
                centered: true,
                onOk() {
                    delmem(record.id).then((res) => {
                        console.log(res);
                        if (res.status = 204) {
                            getCompanylist()
                            message.success('删除成功');
                        }
                    })
                },
                onCancel() {
                    console.log('Cancel');
                },
                class: 'test',
            });
        };

        const onSearch = (searchValue) => {
            console.log('use value', searchValue);
            console.log('or use this.value', value.value);
        };

        const onChange = (number) => {
            console.log('Page: ', pageNumber);
        };

        const rowSelection = ref({
            checkStrictly: false,
            onChange: (selectedRowKeys, selectedRows) => {
                batchIdlist.value = selectedRowKeys
            },
            onSelect: (record, selected, selectedRows) => {
                // console.log(record, selected, selectedRows,2);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                // console.log(selected, selectedRows, changeRows,3);
            },
        });


        //批量删除会员
        const batchDeletemem = () => {
            Modal.confirm({
                title: '提示',
                icon: createVNode(ExclamationCircleOutlined),
                content: createVNode('div', { style: 'color:black;' }, '删除个人会员将删除此会员的一切信息，包括简历、投递记录等信息，删除后不可恢复。是否继续？'),
                centered: true,
                onOk() {
                    companylist.value.forEach(item => {
                        batchIdlist.value.forEach(batchid => {
                            if (item.id === batchid) {
                                delmem(batchid).then((res) => {
                                    console.log(res);
                                    if (res.status = 204) {
                                        getCompanylist()
                                    }
                                })
                            }
                        })
                    })

                },
                onCancel() {
                    console.log('Cancel');
                },
                class: 'test',
            });
        };


        const handleSearchChange = (value) => {
            console.log(value);

        }
        //获取会员数据
        const getCompanylist = () => {
            let par = {
                utype: 1,
                pagesize: pagesize.value,
                page: page.value
            }
            getmem(par).then(({ data }) => {
                companylist.value = data.results
                count.value = data.count
            })
        }

        //pagesize 变化的回调
        const onShowSizeChange = (Page, pageSize) => {
            pagesize.value = pageSize;
            page.value = Page
            getCompanylist()
        };
        //页码改变的回调
        const onCurrentChange = (pageNumber) => {
            getCompanylist()
        };

        // 获取到的路由参数
        const Route = useRoute(); //获取到值

        onMounted(() => {
            getCompanylist()
        })

        const columns = [{
            title: 'UID',
            width: 100,
            dataIndex: 'id',
            key: 'id',
        }, {
            title: ' 用户名',
            dataIndex: 'username',
            key: 'username',
        }, {
            title: '手机号',
            dataIndex: 'mobile',
            key: 'mobile',
        }, {
            title: '注册时间',
            dataIndex: 'reg_time',
            key: 'reg_time',
            width: 150,
        }, {
            title: '最近登录',
            dataIndex: 'last_login_time',
            key: 'last_login_time',
            slots: { customRender: 'last_login_time' },
        }, {
            title: ' 会员状态',
            dataIndex: 'status',
            key: 'status',
            slots: { customRender: 'status' },
        }, {
            title: '操作',
            key: 'action',
            fixed: 'right',
            width: 250,
            slots: { customRender: 'action' },
        }];
        return {
            searchlist,
            companylist,
            rules,
            addvisible,
            columns,
            onChange,
            onSearch,
            handleSearchChange,
            rowSelection,
            handleAddOk,
            cancelAddForm,
            addformState,
            formRef,
            showAddModal,
            count,
            page,
            pagesize,
            pageSizeOptions,
            onShowSizeChange,
            onCurrentChange,
            lookvisible,
            lookMen,
            lookform,
            closeLook,
            editvisible,
            handleEditOk,
            editformState,
            showEditModal,
            labelCol: { style: { width: '80px' } },
            showConfirm,
            deletemem,
            batchDeletemem
        }
    }
})
</script>

<style lang="scss" scoped>
.lookmem {
    margin-left: 40px;
    line-height: 40px;

    div {
        label {
            font-weight: 700;
            margin-right: 10px;
        }

        span {
            color: #606266;
        }
    }
}
</style>